<!doctype html>
<html lang="en">
<head>
	<title>jQuery contentEditable() - Example</title>
	
    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="application/javascript" src="jquery.contenteditable.js"></script>
	<script type="application/javascript">
    	$(function(){
			
			// execute once on the container
			$("#main").contentEditable().change(function(e){
				// what to do when the data has changed
				console.log(e);
				$(".output .action").html(e.action);
				for(i in e.changed){
					$(".output .key").html(i);
				}
			});
			
		});
		
    </script>
	
</head>
<body>


<div id="main">

<h1 contentEditable="true" data-key="title">My Title</h1>

<p contentEditable="true" data-key="content">Gizzle ipsum dolor boom shackalack amizzle, fo shizzle my nizzle adipiscing elit. I saw beyonces tizzles and my pizzle went crizzle dawg velizzle, crunk volutpizzle, suscipizzle pizzle, gravida vizzle, arcu. Pellentesque eget sure. Sed erizzle. Fusce izzle dolor dapibus fo shizzle tempizzle dawg. Bling bling pellentesque nibh izzle turpis. Bling bling that's the shizzle tortor. Funky fresh nizzle rhoncizzle . In dang platea dictumst. I saw beyonces tizzles and my pizzle went crizzle dapibus. Curabitizzle tellus go to hizzle, pretium doggy, mattizzle ac, eleifend vitae, fo shizzle. Boom shackalack suscipizzle. Integizzle we gonna chung velizzle sizzle purus.</p>

<section class="output">
<h3>Action: <span class="action"></span></h3>
<h3>Changed: <span class="key"></span></h3>
<p><i>Note: open the inspector for a more detailed output of the event</i></p>
</section>

</div>


</body>
</html>

